<template>
  <div class="page-box" ref="chartView">
    <div class="title">
      <img src="@/assets/img/zbig-title.png" alt="" />
      <span class="title-text">{{ title }}</span>
      <span class="year-box">
        <el-date-picker v-model="yearValue" type="year" format="yyyy" value-format="yyyy">
        </el-date-picker>
      </span>
      <div class="setting download el-icon-download" @click="exportImage()">导出态势统计图</div>
      <ScreenFull class="setting screenStyle" id="screenfull" :isIcon="false" />
      <div class="setting iconfont icon-xitongpeizhi" @click="goConfig">个性设置</div>
      <div class="go-back" @click="goHome">
        返回
      </div>
      <div class="time-box">
        <span class="time">{{ timeData.time }}</span>
        <span class="r-t">
          <span class="week">{{ timeData.week }}</span>
          <span class="data">{{ timeData.data }}</span>
        </span>
      </div>
    </div>
    <div class="page-wrapper" v-if="checkList&&checkList.length>0">
      <!-- 左 -->
      <div class="left-box">
        <Card height="56%" :samllTitle="checkList[0].name">
          <template v-slot>
            <div class="content-slot">
              <component :is='checkList[0].compName' :year="yearValue"></component>
            </div>
          </template>
        </Card>
        <Card class="m-t" height="40%" :samllTitle="checkList[3].name">
          <template v-slot>
            <div class="content-slot">
              <component :is='checkList[3].compName' :year="yearValue"></component>
            </div>
          </template>
        </Card>
      </div>
      <!-- 中 -->
      <div class="main-box">
        <MiddleBox />
        <div style="height:calc(56% - 80px)">
          <div class="content-slot p-t">
            <component :is='checkList[1].compName' :year="yearValue"></component>
          </div>
        </div>
        <Card class="m-t" height="40%" :samllTitle="checkList[4].name" :isCenter="true">
          <template v-slot>
            <div class="content-slot">
              <component :is='checkList[4].compName' :year="yearValue"></component>
            </div>
          </template>
        </Card>
      </div>
      <!-- 右 -->
      <div class="right-box">
        <Card height="56%" :samllTitle="checkList[2].name">
          <template v-slot>
            <div class="content-slot">
              <component :is='checkList[2].compName' :year="yearValue"></component>
            </div>
          </template>
        </Card>
        <Card class="m-t" height="40%" :samllTitle="checkList[5].name">
          <template v-slot>
            <div class="content-slot">
              <component :is='checkList[5].compName' :year="yearValue"></component>
            </div>
          </template>
        </Card>
      </div>
    </div>
    <ChartDialog ref="chartDialogRef" @cancelChart="initData" />
  </div>
</template>

<script>
// import { getSelect } from '@/api/common'
import html2canvas from 'html2canvas'
import ChartDialog from './chartDialog.vue'
import Card from './common/card.vue'
import MiddleBox from './common/middleBox.vue'
import ProjectComp from './common/projectComp.vue'
import AchievementTrans from './common/achievementTrans.vue'
import DomainComp from './common/domainComp.vue'
import OverallLine from './common/overallLine.vue'
import BorrowHotList from './common/borrowHotList.vue'
import ResultsBy from './common/resultsBy.vue'
import FundExpend from './common/fundExpend.vue'
import GuideComp from './common/guideComp.vue'
import RiskWarning from './common/riskWarning.vue'
import ProjectProgress from './common/projectProgress.vue'
import PurchaseContract from './common/purchaseContract.vue'
import ProjectList from './common/projectList.vue'
import { getConfigChart, getCurrentConfig } from '@/api/chart'
export default {
  components: {
    ChartDialog,
    MiddleBox,
    Card,
    ProjectComp,
    AchievementTrans,
    DomainComp,
    OverallLine,
    BorrowHotList,
    ResultsBy,
    FundExpend,
    GuideComp,
    RiskWarning,
    ProjectProgress,
    PurchaseContract,
    ProjectList
  },
  data() {
    return {
      yearValue: '',
      timeData: {},
      dataInterval: null,
      title: '科研设施仪器管理态势展示',
      checkList: [],
      allCheckList: []
    }
  },
  beforeDestroy() {
    // 清除定时器，当组件销毁时
    if (this.dataInterval) {
      clearInterval(this.dataInterval)
    }
  },
  created() {
    // getSelect({ table: '标题', type: '态势名称' }).then(res => {
    //   if (res.code === 200) {
    //     this.title = res.data[0]
    //   }
    // })
    this.dataInterval = setInterval(() => {
      this.timeData = this.getTime()
    }, 1000)
    this.initData()
  },
  mounted() { },
  computed: {},
  methods: {
    initData() {
      getConfigChart().then(res => {
        this.allCheckList = res?.data ?? []
        this.getConfig()
      })
    },
    goConfig() {
      this.$refs.chartDialogRef.show({
        allCheckList: this.allCheckList,
        checkList: this.checkList
      })
    },
    getConfig() {
      this.checkList = []
      getCurrentConfig().then(res => {
        if (!res.data || res.data.length == 0) {
          this.checkList = this.allCheckList.slice(0, 6)
        } else {
          this.checkList = res.data
        }
      })
    },
    getYear() {
      let year = new Date().getFullYear() + ''
      this.yearValue = year
    },
    goHome() {
      this.$router.push('/content')
    },
    getTime() {
      // 创建一个新的Date对象
      let currentDate = new Date()
      // 获取年份
      let year = currentDate.getFullYear() // 返回四位数字形式的年份（如2021）
      // 获取月份（注意月份从0开始计算，所以需要加上1）
      let month = currentDate.getMonth() + 1 // 返回两位数字形式的月份（如9表示九月）
      // 获取日期
      let date = currentDate.getDate() // 返回两位数字形式的日期（如31表示三十一号）
      // 获取星期几（注意星期天为0，星期六为6）
      let weekDays = [
        '星期日',
        '星期一',
        '星期二',
        '星期三',
        '星期四',
        '星期五',
        '星期六'
      ]
      let dayOfWeek = weekDays[currentDate.getDay()] // 返回一个数字（0-6），分别表示星期天到星期六
      // 获取小时
      let hours = String(currentDate.getHours()).padStart(2, '0') // 返回两位数字形式的小时（如14表示下午二点）
      // 获取分钟
      let minutes = String(currentDate.getMinutes()).padStart(2, '0') // 返回两位数字形式的分钟（如58表示五十八分）
      let seconds = String(currentDate.getSeconds()).padStart(2, '0')
      let result = {
        time: `${hours}:${minutes}:${seconds}`,
        week: `${dayOfWeek === 0 ? '日' : dayOfWeek}`,
        data: `${year}-${month}-${date}`
      }
      return result
    },
    exportImage() {
      html2canvas(this.$refs.chartView).then(canvas => {
        const link = document.createElement('a')

        link.href = canvas.toDataURL()
        link.download = 'image.png'
        link.click()
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .page-box {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #001636 0%, #01132b 100%);
    overflow: hidden;
    .title {
      width: 100%;
      height: 80px;
      text-align: center;
      position: relative;
      margin-bottom: 20px;

      img {
        width: 100%;
        height: 140%;
      }
      .title-text {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0%);
        top: 20px;
        text-shadow: 0px 0px 8px rgba(47, 208, 254, 1);
        width: 500px;
        overflow-wrap: break-word;
        color: rgba(255, 255, 255, 1);
        font-size: 30px;
        font-family: AlimamaShuHeiTi;
        font-weight: bold;
        white-space: nowrap;
      }
      .go-back,
      .setting {
        position: absolute;
        right: 20px;
        top: 16px;
        font-size: 14px;
        cursor: pointer;
        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
        font-weight: 400;
        color: #fff;
        padding: 6px 16px;
        background: #153867;
        border-radius: 4px;
        &:hover {
          cursor: pointer;
          opacity: 0.6;
        }
      }
      .screenStyle {
        right: 226px !important;
      }
      .setting {
        right: 100px;
      }
      .download {
        right: 18%;
        padding: 10px;
        top: 18px;
      }
    }
  }
  .page-wrapper {
    width: 100%;
    height: calc(100% - 80px);
    display: flex;
    box-sizing: border-box;
    padding: 0 20px 20px;
    .left-box,
    .right-box {
      width: 26%;
      height: 100%;
      box-sizing: border-box;
      padding: 10px;
    }
    .main-box {
      width: 48%;
      box-sizing: border-box;
      padding: 10px;
    }
  }
  .time-box {
    position: absolute;
    left: 20px;
    top: 10px;
    z-index: 1;
    display: flex;
    height: 60%;
    align-items: center;
    background: linear-gradient(360deg, #376df9 0%, #fff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    .time {
      font-size: 38px;
      font-weight: bold;
      display: inline-block;
      width: 160px;
      margin-right: 10px;
    }
    .r-t {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
  }
  .content-slot {
    width: 100%;
    height: 100%;
  }
  ::v-deep .year-box {
    position: absolute;
    width: 90px;
    left: 20%;
    top: 14px;
    border-radius: 4px;
    background: #153867;
    border-color: #153867;
    .el-date-editor {
      width: 100%;
      .el-input__inner {
        background: transparent;
        border-color: transparent;
        color: #fff !important;
        padding-right: 10px !important;
      }
    }
  }
</style>
